import React, { useState, useEffect } from 'react';

export default function MultiEffectHookDemo() {

    const [count, setCount] = useState(0);
    const [isLogin, setLogin] = useState(true);

    useEffect(() => {
        console.log('修改DOM');
    }, [count])

    // 默认情况下,没有[] 所有的useEffect都会被执行
    // 加上[],只会执行一次
    useEffect(() => {
        console.log('订阅事件');
    }, [])

    useEffect(() => {
        console.log('网络请求');
    }, [])

    return (
        <div>
            <h2>MultiEffectHookDemo</h2>
            {count}
            <button onClick={e => setCount(count + 1)}>+1</button>
            {/* 在这里修改状态的时候,不会再发生事件修改DOM */}
            {/* 因为上面写了[count], 只对count有依赖 */}
            <h2>{isLogin ? "leon" : "noUse"}</h2>
            <button onClick={e => setLogin(!isLogin)}>登录/注销</button>
        </div>
    )
}